<!-- ignore the following lines, they are not important to this demo -->
<jigsaw-demo-description [summary]="summary" [content]="description">
</jigsaw-demo-description>

<!-- start to learn the demo from here -->

<div class="demo-1">
    <h3>图标</h3>
    <p class="notes">输入值是：<span>{{inputValue}}</span></p>
    <jigsaw-auto-complete-input [(value)]="inputValue" placeholder="auto complete input demo" width="250"
                               (valueChange)="valueChanged($event)" [data]="_$dropdownData">
        <a jigsaw-prefix-icon (click)="click()"><span class="fa fa-search" style="font-size: 14px;"></span></a>
        <a jigsaw-icon (click)="click()"><span class="fa fa-question" style="font-size: 14px;"></span></a>
    </jigsaw-auto-complete-input>
</div>
<br><br><br>

<div class="demo-2">
    <h3>带默认值</h3>
    <p class="notes">输入值是：<span>{{inputValue2}}</span></p>
    <jigsaw-auto-complete-input [(value)]="inputValue2" placeholder="auto complete input demo" width="20%"
                               [data]="_$dropdownData">
    </jigsaw-auto-complete-input>
</div>
<br><br><br>

<div class="demo-3">
    <h3>下拉列表最大高度</h3>
    <p class="notes">最大高度：
        <jigsaw-input [(value)]="maxDropDownHeight"></jigsaw-input>
    </p>
    <jigsaw-auto-complete-input placeholder="auto complete input demo" [data]="_$dropdownData" [width]="width" height="32"
                               [maxDropDownHeight]="maxDropDownHeight">
    </jigsaw-auto-complete-input>
</div>
